<!--
- Kit: Shadcn UI
- Component: Field
- Code:
```twig
<div class="w-full max-w-md">
    <twig:Field:Group>
        <twig:Field:Set>
            <twig:Field:Label>Responses</twig:Field:Label>
            <twig:Field:Description>
                Get notified when ChatGPT responds to requests that take time, like research or image generation.
            </twig:Field:Description>
            <twig:Field:Group data-slot="checkbox-group">
                <twig:Field orientation="horizontal">
                    <twig:Checkbox id="push" checked disabled />
                    <twig:Field:Label for="push" class="font-normal">
                        Push notifications
                    </twig:Field:Label>
                </twig:Field>
            </twig:Field:Group>
        </twig:Field:Set>
        <twig:Field:Separator />
        <twig:Field:Set>
            <twig:Field:Label>Tasks</twig:Field:Label>
            <twig:Field:Description>
                Get notified when tasks you've created have updates. <a href="#">Manage tasks</a>
            </twig:Field:Description>
            <twig:Field:Group data-slot="checkbox-group">
                <twig:Field orientation="horizontal">
                    <twig:Checkbox id="push-tasks" />
                    <twig:Field:Label for="push-tasks" class="font-normal">
                        Push notifications
                    </twig:Field:Label>
                </twig:Field>
                <twig:Field orientation="horizontal">
                    <twig:Checkbox id="email-tasks" />
                    <twig:Field:Label for="email-tasks" class="font-normal">
                        Email notifications
                    </twig:Field:Label>
                </twig:Field>
            </twig:Field:Group>
        </twig:Field:Set>
    </twig:Field:Group>
</div>
```
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
<div class="w-full max-w-md">
    <div data-slot="field-group" class="group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&amp;&gt;[data-slot=field-group]]:gap-4 ">
<fieldset data-slot="field-set" class="flex flex-col gap-6 has-[&gt;[data-slot=checkbox-group]]:gap-3 has-[&gt;[data-slot=radio-group]]:gap-3 ">
<label class="items-center text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[&gt;[data-slot=field]]:w-full has-[&gt;[data-slot=field]]:flex-col has-[&gt;[data-slot=field]]:rounded-md has-[&gt;[data-slot=field]]:border [&amp;&gt;*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10" data-slot="field-label">Responses</label>
            <p data-slot="field-description" class="text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&amp;]:-mt-1.5 [&amp;&gt;a:hover]:text-primary [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">Get notified when ChatGPT responds to requests that take time, like research or image generation.
            </p>
            <div data-slot="field-group" class="group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&amp;&gt;[data-slot=field-group]]:gap-4 ">
<div role="group" data-slot="field" data-orientation="horizontal" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-row items-center [&amp;&gt;[data-slot=field-label]]:flex-auto has-[&gt;[data-slot=field-content]]:items-start has-[&gt;[data-slot=field-content]]:[&amp;&gt;[role=checkbox],[role=radio]]:mt-px">
<input type="checkbox" class="peer size-4 inline-block align-middle accent-primary " id="push" checked disabled>

                    <label class="flex items-center gap-2 text-sm leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 font-normal" data-slot="field-label" for="push">Push notifications
                    </label>
                </div>
            </div>
        </fieldset>
        <div data-slot="field-separator" data-content="false" class="relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 ">
    <div class="shrink-0 bg-border h-[1px] w-full absolute inset-0 top-1/2" role="none"></div>
</div>

        <fieldset data-slot="field-set" class="flex flex-col gap-6 has-[&gt;[data-slot=checkbox-group]]:gap-3 has-[&gt;[data-slot=radio-group]]:gap-3 ">
<label class="items-center text-sm font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[&gt;[data-slot=field]]:w-full has-[&gt;[data-slot=field]]:flex-col has-[&gt;[data-slot=field]]:rounded-md has-[&gt;[data-slot=field]]:border [&amp;&gt;*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10" data-slot="field-label">Tasks</label>
            <p data-slot="field-description" class="text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&amp;]:-mt-1.5 [&amp;&gt;a:hover]:text-primary [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 ">Get notified when tasks you've created have updates. <a href="#">Manage tasks</a>
            </p>
            <div data-slot="field-group" class="group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&amp;&gt;[data-slot=field-group]]:gap-4 ">
<div role="group" data-slot="field" data-orientation="horizontal" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-row items-center [&amp;&gt;[data-slot=field-label]]:flex-auto has-[&gt;[data-slot=field-content]]:items-start has-[&gt;[data-slot=field-content]]:[&amp;&gt;[role=checkbox],[role=radio]]:mt-px">
<input type="checkbox" class="peer size-4 inline-block align-middle accent-primary " id="push-tasks">

                    <label class="flex items-center gap-2 text-sm leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 font-normal" data-slot="field-label" for="push-tasks">Push notifications
                    </label>
                </div>
                <div role="group" data-slot="field" data-orientation="horizontal" class="group/field flex w-full gap-3 data-[invalid=true]:text-destructive flex-row items-center [&amp;&gt;[data-slot=field-label]]:flex-auto has-[&gt;[data-slot=field-content]]:items-start has-[&gt;[data-slot=field-content]]:[&amp;&gt;[role=checkbox],[role=radio]]:mt-px">
<input type="checkbox" class="peer size-4 inline-block align-middle accent-primary " id="email-tasks">

                    <label class="flex items-center gap-2 text-sm leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 font-normal" data-slot="field-label" for="email-tasks">Email notifications
                    </label>
                </div>
            </div>
        </fieldset>
    </div>
</div>